<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddDrawTool.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_TOOL_LAYER).addGeometry(map).addTo(map);

      let drawTool = new maptalks.DrawTool({
        mode: "LineString",
        "symbol": {
          "lineColor": "#1bbc9b",
          "lineWidth": 2,
          "polygonFill": "#f00",
          "polygonOpacity": 0.3
        },
        "vertexSymbol": {
          "markerType": "ellipse",
          "markerFill": "#eee608",
          "markerLineColor": "#1bbc9b",
          "markerLineWidth": 3,
          "markerWidth": 10,
          "markerHeight": 10
        },
      }).addTo(map).disable();

      drawTool.on("drawend", function (param) {
        console.log(param.geometry);
        layer.addGeometry(param.geometry);
      });

      let items = ["LineString", "Polygon", "Circle", "Ellipse", "Rectangle", "FreeHandLineString", "FreeHandPolygon"].map(function (value) {
        return {
          item: value,
          click: function () {
            drawTool.setMode(value).enable();
          }
        };
      });

      let toolbar = new maptalks.control.Toolbar({
        items: [
          {
            item: "Shape",
            children: items
          },
          // {
          //     item: "Disable",
          //     click: function () {
          //         drawTool.disable();
          //     }
          // },
          {
            item: "Clear",
            click: function () {
              layer.clear();
            }
          }
        ]
      }).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
